<template>
  <div class="hello">
    <draggable
        class="list-group"
        tag="ul"
        v-model="list"
        v-bind="dragOptions"
        @start="isDragging = true"
        @end="isDragging = false"
      >
        <transition-group type="transition" name="flip-list">
          <li
            class="list-group-item"
            v-for="(element,idx) in list"
            :key="'name'+idx"
          >
            <i
              :class="
                element.fixed ? 'fa fa-anchor' : 'glyphicon glyphicon-pushpin'
              "
              @click="element.fixed = !element.fixed"
              aria-hidden="true"
            ></i>
            {{ element }}
          </li>
        </transition-group>
      </draggable>

  </div>
</template>

<script>
import draggable from 'vuedraggable'
import Sortable from 'sortablejs';
export default {
  name: 'HelloWorld',
  components: {draggable,Sortable},
  display: "Transition",
  order: 6,
  data () {
    return {
      isDragging: false,
      selComponents: [111,222,333],
      list: [111,222,333],
    }
  },
  methods:{
    allow(evt) {
      // this.designtype = evt.draggedContext.element.DESIGNTYPE;
      // this.current = evt.draggedContext.futureIndex;
    },
  },
  computed: {
			dragOptions() {
				return {
					animation: 0,
					group: "description",
					disabled: false,
					ghostClass: "ghost"
				};
			},
		}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
